<template>
	<view class="container" :class="'theme-'+theme">
	<view class="addTitle">
		<view class="titleDetail">
			<view class="titleLeft" > 
				<image src="../../static/newh5/fanhui.png" 
				class="yticon" 
				style="width: 13px;height: 20px;color:black" 
				@click="returnIndex()"
				></image>
			</view>
			<view class="titleCenter" >
			<b class="titleText">个人信息</b>
			</view>
			<view class="titleRight"  style="color: #269cd3;flex:1" > </view>
		</view>
		</view>
		<view class="info-section">
			<view class="info-item" @click="upload">
				<view class="left">头像</view>
				<view>
					<image :src="avatarPath || '/static/missing-face.png'"></image>
				</view>
				<text class="yticon icon-you icon"></text>
			</view>
			<view class="border"></view>
			<view class="info-item" @click="openPopup('name')">
				<view class="left">姓名</view>
				<view class="right">
					<input placeholder="请输入姓名" v-model="name" disabled />
				</view>
				<text class="yticon icon-you icon"></text>
			</view>
			<view class="border"></view>
			<view class="info-item" @click="openPopup('email')">
				<view class="left">邮箱</view>
				<view class="right">
					<input placeholder="请输入邮箱" v-model="email" disabled />
				</view>
				<text class="yticon icon-you icon"></text>
			</view>
			<view class="border"></view>
			<view class="info-item" >
				<view class="left">工号</view>
				<view class="right">
					<input placeholder="请输入工号" v-model="workNum" disabled />
				</view>
				<!-- <text class="yticon icon-you icon"></text> -->
			</view>
			<view class="border"></view>
			<view class="info-item" >
				<view class="left">手机号码</view>
				<view class="right">
					<input placeholder="请输入手机号码" v-model="telNum" disabled />
				</view>
				<!-- <text class="yticon icon-you icon"></text> -->
			</view>
			<view class="border"></view>
			<view class="info-item" >
				<view class="left">所属部门</view>
				<view class="right">
					<input placeholder="" v-model="ownDep" disabled />
				</view>
				<!-- <text class="yticon icon-you icon"></text> -->
			</view>
			<view class="border"></view>
		</view>
		<!-- <view class="tip">点击头像即可上传新头像 ( 只能上传2M以内的jpg格式图片 )</view> -->
		<view class="info-section">
			<view class="info-button1" @click="switchUser()">
				<text>切换账号</text>
			</view>
		</view>
		<view class="info-section">
			<view class="info-button" @click="toLogout()">
				<text class="themeTextColor">退出登录</text>
			</view>
		</view>
		<!-- <button class="confirm-btn" @click="saveInfo">切换账号</button>
		<button class="confirm-btn" @click="saveInfo">推出登录</button> -->

		<u-picker
		  mode="selector"
		  v-model="pickerShow"
		  @confirm="pickerConfirm"
		  @columnchange="columnChange"
		  :range="depRange"
		  range-key="fullDeptName"
		>
		</u-picker>
		<uni-popup ref="showname" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">修改姓名</text>
				<view class="popup-content uni-tip-content">
					<input class="cancel-reason" v-model="edName" />
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="close('name')">取消</text>
					<text class="uni-tip-button confirm themeBgColor" @click="editName()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="showemail" :type="type" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">修改邮箱</text>
				<view class="popup-content uni-tip-content">
					<input class="cancel-reason" v-model="edEmail" />
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="close('email')">取消</text>
					<text class="uni-tip-button confirm themeBgColor" @click="editEmail()">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {  goback } from "@/common/utils/navigateBack.js";
	import {
		updateUserinfo
	} from '../../api/user/user.js'
	import {
		baseURL,
		serv
	} from '../../common/utils/config.js'
	import {
		getDeptInfoByKey,
	}
	from "@/api/public/login.js";
	import {
		mapMutations,
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {},
				name: '',
				email: '',
				workNum:'70157',
				telNum:'1234567890',
				ownDep:'中国绿发投资有限公司',
				type: 'center',
				//部门列表
				range: [],
				// 部门选择弹窗
				pickerShow: false,
				edName: '',
				edEmail: '',
				avatarPath: '',
				deptInfoKey: '',
				jsencryptPwd:'Aa111111'
			};
		},
		onShow(){
			this.jsencryptPwd = uni.getStorageSync('jsencryptPwd')
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.avatarPath = this.userInfo.avatarPath
			this.name = this.userInfo.userName
			this.email = this.userInfo.email
			this.telNum = this.userInfo.mobile
			this.workNum = this.userInfo.jobNo
			this.ownDep = this.userInfo.deptNameList
			// this.deptInfoKey = this.$route.query.deptKey;
			//获取部门列表
			// getDeptInfoByKey(this.deptInfoKey).then(res => {
			  // if(res.code === 1) {
			  //   //默认选择第一个部门进行登录
			  //   this.range = res.data;
			  // }else {
			  //   this.$util.msg(res.message);
			  // }
			//   console.log(res.data)
			// })
		},
		computed:{
			...mapState(['depRange']),
		},
		methods: {
			...mapMutations(['setUserInfo','logout']),
			returnIndex() {
				goback()
			},
			//切换账号
			switchUser(){
				this.pickerShow=true
				console.log('depRange',this.depRange)
			},
			toLogout() {
				uni.showModal({
					content: '确定要退出登录么',
					success: (e) => {
						if (e.confirm) {
							this.logout();
							uni.setStorageSync('loginInfo', '')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/public/login'
								});
							}, 200)
						}
					}
				});
			},
			columnChange(e) {},
			pickerConfirm(e) {
			  if(this.wxLogin) {
			    this.wxLogin = false;
			    const param = {
			      key: this.deptInfoKey,
			      userCode: this.depRange[e[0]].userCode
			    }
			    this.$store.dispatch('wxSelectDept', param).then(res => {
			      if (res.code === 0) {
			        this.$util.msg("登录成功");
			        uni.reLaunch({
			          url: "/pages/index/index",
			        });
			      } else {
			        this.$util.msg(res.message);
			      }
			    });
			    return;
			  }
			  console.log(e,this.depRange)
			  const deptLoginData = {
			    deptId: this.depRange[e[0]].deptId,
			    key: this.key,
			    passwd: this.jsencryptPwd,
			    tenantId: this.depRange[e[0]].tenantId,
			    userCode: this.depRange[e[0]].userCode,
			  };
			  this.$store.dispatch("selectedDeptLogin", deptLoginData).then((res) => {
			    this.logining = false;
			    if (res.code === 0) {
			      this.$util.msg("登录成功");
			      // this.bindOrToIndex();
				  setTimeout(()=>{
				  	uni.switchTab({
				  		 url: '/pages/user/user'
				  	});
				  },300)
				  
			    } else {
			      deptLoginData;
			      this.$util.msg(res.message);
			    }
			  });
			},
			upload() {
				uni.chooseImage({
					sizeType: 'compressed',
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: baseURL + serv.sysrest + '/api/basic/uploadImage',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: "Bearer " + uni.getStorageSync('token')
							},
							formData: {
								// 'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								if (data.code === 0) {
									this.avatarPath = data.data
									this.$util.msg('上传成功')
									this.userInfo.avatarPath = this.avatarPath
									this.setUserInfo(this.userInfo)
								} else {
									this.$util.msg(data.message)
								}
							}
						});
					}
				})
			},
			service(type, open) {
				this.type = type;
				this.$nextTick(() => {
					this.$refs['show' + open].open();
				})
			},
			openPopup(type) {
				this.edName = this.name
				this.edEmail = this.email
				this.service('center', type)
			},
			// 关闭弹窗
			close(type) {
				this.$refs['show' + type].close();
				this.curOrder = {}
				this.cancelReason = ''
			},
			editName() {
				if (!this.edName) {
					this.$util.msg('请输入姓名')
					return;
				}
				
				this.name = this.edName
				this.saveInfo()
				this.close('name')
			},
			editEmail() {
				if (!this.edEmail) {
					this.$util.msg('请输入邮箱')
					return;
				}
				if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.edEmail)) {
					this.$api.msg('请输入正确的邮箱');
					return;
				}
				this.email = this.edEmail
				this.saveInfo()
				this.close('email')
			},
			saveInfo() {
				const params = {
					userName: this.name,
					email: this.email
				}
				updateUserinfo(params).then(res => {
					if (res.code === 0) {
						this.$util.msg('保存成功')
						this.userInfo.userName = this.name
						this.userInfo.email = this.email
						this.setUserInfo(this.userInfo)
					} else {
						this.$util.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: #f5f5f5;
	}

	.confirm-btn {

		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin: 60upx 20rpx 0 20rpx;
		// background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.icon {
		color: #999;
	}

	.tip {
		margin: 20rpx 20rpx;
		color: $base-color;
		font-size: 13px;
	}

	.info-section {
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		.info-button{
			display: flex;
			padding: 20rpx;
			align-items: center;
			justify-content:center;
		}
		.info-button1{
			display: flex;
			padding: 20rpx;
			align-items: center;
			justify-content:center;
			text{
				color:black;
			}
		}
		.info-item {
			display: flex;
			flex-direction: row;
			padding: 20rpx;
			align-items: center;
			text-align: right;
			justify-content: space-between;

			.left {
				flex: 1;
				text-align: left;
				font-size: $font-base;
				color: $font-color-base;
			}

			.right {
				margin-right: 20rpx;
				flex: 1;
				font-size: $font-sm;
				color: #999;
			}

			image {
				flex: 1;
				margin-right: 20rpx;
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
			}

			&:active {
				background-color: #fafafa;
			}
		}
	}

	.border {
		border-top: 0.5px solid $border-color-base;
	}

	.uni-tip {
		overflow: hidden;

		.popup-content {

			.cancel-reason {
				width: 100%;
				height: 70rpx;
				padding: 16rpx;
				color: #303133;
				font-size: 14px;
				border: 1px solid #f5f5f5;
				border-radius: 10rpx;
			}
		}

		.uni-tip-group-button {
			border-top: none;

			.uni-tip-button {
				border-top: 1px solid #e2e2e2;

				&.confirm {
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					color: #fff;
					background-color: $base-color;
				}
			}
		}
	}
</style>
